<template>
  <div>
    <!-- 收益分析 -->
    <div class="income_analyse_wrapper" v-show="optionData.length">
      <div class="income_analyse_curve">
        <div>
          <div class="chart_line" id="chartLine"></div>
        </div>
      </div>
      <!-- tab 切换 -->
      <div class="income_analyse_curve_change_tab_wrapper">
        <div class="income_analyse_curve_change_tab">
          <div
            :class="{ isSelect: curId === index }"
            v-for="(item, index) in dataTipArr"
            :key="index"
            @click="setSelect(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div v-show="!optionData.length">
      <NoData />
    </div>
  </div>
</template>
<script>
import NoData from './common/NoData';
import configDataOptions from '../utils/dataOption';
import { jumpTokline, compare, timestampToTime } from '../utils/index';
export default {
  name: 'ProfitLine',
  data() {
    return {
      optionData: true,
      curId: 0,
      dataTipArr: ['近3月', '近1年', '创建以来'],
      tempArr: [],
      threeMonthArr: [],
      yearArr: [],
    };
  },
  props: {
    optionData: {
      default: '暂无数据',
      type: String,
    },
  },
  components: {
    NoData,
  },
  watch: {
    optionData: {
      handler(newValue) {
        configDataOptions.lineOption.data[0].originData = newValue;
        if (configDataOptions.lineOption) {
          // 画折线图
          const myChart = D3Charts.init('chartLine');
          myChart.setOption(configDataOptions.lineOption);
        }
        this.tempArr = [];
        // 数组暂存要切换的数据
        this.tempArr = this.optionData;
      },
    },
  },
  methods: {
    // 切换曲线图
    setSelect(index) {
      this.curId = index;
      this.optionData = [];
      if (index === 0) {
        //近3个月的数据处理
        this.optionData = this.threeMonthArr;
      } else if (index === 1) {
        // 近1年
        this.optionData = this.yearArr;
      } else {
        //创建以来
        this.optionData = this.tempArr;
      }
    },
    spliceData(mon) {
      this.optionData = this.tempArr;
      const date = new Date();
      const timeStamp = date.setMonth(date.getMonth() - mon);
      const dateTime = timestampToTime(timeStamp, 3);
      const dateStr = dateTime.split('-').join('');
      let j = 0;
      for (let i = this.optionData.length - 1; i >= 0; i--) {
        if (Number(this.optionData[i].date) < dateStr) {
          j = i + 1;
          break;
        }
      }
      return this.optionData.slice(j);
    },
  },
};
</script>

<style lang="less" scoped>
.income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #fff;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
    margin-top: 0.28rem;
  }
}
[theme-mode='black'] .income_analyse_wrapper {
  width: 96%;
  margin: 0 auto;
  background-color: #121212;
  .income_analyse_curve {
    width: 100%;
    height: 3.84rem;
  }
}
.income_analyse_curve_change_tab_wrapper {
  margin-top: 0.45rem;
}
.income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #666666;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    color: #ffffff;
    background-color: #e93030;
    height: 0.7rem;
    width: 2.7rem;
  }
}
[theme-mode='black'] .income_analyse_curve_change_tab {
  width: 6.8rem;
  height: 0.7rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  border-radius: 4px;
  font-size: 0.26rem;
  color: #323232;
  border: 1px solid #323232;
  line-height: 0.7rem;
  div {
    height: 0.7rem;
    width: 2.7rem;
  }
  .isSelect {
    border-radius: 4px;
    background-color: #fd4332;
    color: #d2d2d3;
    height: 0.7rem;
    width: 2.7rem;
  }
}
</style>
